<template>
  <div>
    <quill-editor
      :options="quillOption"
      v-model="quillContent"
      @change="change()"
      ref="QuillEditor"
    ></quill-editor>
    <t-dialog
      title="上传图片"
      append-to-body
      v-model="imgDialogVisible"
      width="50%"
    >
      <el-form ref="form" size="small" :model="img" label-width="140px">
        <el-form-item required  label="本地图片链接：">
          <t-image-upload :id="id" v-model="img.url" ></t-image-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="info" @click="imgDialogVisible = false">取消</el-button>
          <el-button type="primary" :disabled="!img.url"  @click="addImg">立即创建</el-button>
        </el-form-item>
      </el-form>
    </t-dialog>
  </div>
</template>

<script>
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import { quillEditor, Quill } from "vue-quill-editor";
// quill文档 http://doc.quilljs.cn
import ImageResize from "quill-image-resize-module";
import ImageBlot from "../../assets/js/imageBlot";
ImageBlot.blotName = "simpleImage";
ImageBlot.tagName = "img";
Quill.register("modules/ImageResize", ImageResize);
Quill.register(ImageBlot);
export default {
  name: "t-quill",
  components: {
    quillEditor,
  },
  props: ["value",'id'],
  data() {
    return {
      quillOption: {
        modules: {
          ImageResize:{},
          toolbar: {
            container: [
              ["bold", "italic", "underline", "strike"],
              [{ header: 1 }, { header: 2 }],
              [{ list: "ordered" }, { list: "bullet" }],
              [{ indent: "-1" }, { indent: "+1" }],
              [{ size: ["small", false, "large", "huge"] }],
              [{ header: [1, 2, 3, 4, 5, 6, false] }],
              [{ color: [] }, { background: [] }],
              [{ align: [] }],
              ["link", "image", "video", "clean"],
            ],
            handlers: {
              image: (value) => {
                if (value) {
                  this.imgDialogVisible = true;
                }
              },
            },
          },
        },
      },
      imgDialogVisible: false,
      img: {
        url: "",
        alt: "",
        style:"",
        width:'100%',
        height:'auto'
      },
      quillContent: this.value,
    };
  },
  methods: {
    change() {
      this.$emit("input", this.quillContent);
    },
    addImg() {
      if(this.img.url){
        var quill = this.$refs.QuillEditor.quill;
        try {
          let length = quill.selection.savedRange.index;
          quill.insertEmbed(length, "simpleImage", this.img);
          quill.setSelection(length + 1);
        } catch (e) {
          this.$message.error("请先选择图片插入位置");
        }
        this.imgDialogVisible = false;
      }else{
        this.$message.error("请先上传图片");
      }
    },
  },
  watch: {
    value(val) {
      this.quillContent = val;
    },
    imgDialogVisible(v){
      if(!v){
        this.img = {
          url: "",
          alt: "",
        }
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.quill-editor {
  line-height: 1;
}
/deep/.ql-editor {
  min-height: 300px;
  max-height: 650px;
}
</style>